body{
	margin: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 100vh;
	background: #000;
}
a{
	text-decoration: none;
	color: #fff;
}
.box{
	width: 230px;
	color: #fff;
	background: #000;
	padding:40px 30px;
	position: relative;
	cursor: pointer;
	user-select: none;
}
.box div{
	line-height: 26px;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}
.box::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	transform: skew(2deg,2deg);
	z-index: -1;
}
.box:nth-child(1)::before{
	background: linear-gradient(45deg,#ff1123,#f3ff05);
}
.box:nth-child(2)::before{
	background: linear-gradient(45deg,#4fd0ff,#0051cb);
}
.box:nth-child(3)::before{
	background: linear-gradient(45deg,#01ff16,#ffff00);
}
.box:nth-child(4)::before{
	background: linear-gradient(45deg,#ff55ff,#6a359f);
}
.box a{
	border:1px solid #fff;
	padding:8px 10px;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
	display: inline-block;
	transform: translateY(-20px);
	position: relative;
	z-index: 1;
}
.box:hover a{
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.box a:hover{
	color: #000;
	background: #fff;
}

.box h1{
	font-size: 4em;
	position: absolute;
	right:1em;
	top: 2em;
	color: rgba(255,255,255,0.4);
	transition: 0.5s;
}

.box:hover h1{
	top: 1em;
}

.box::after{
	content: '';
	position: absolute;
	left: 0;
	right: 50%;
	top: 0;
	bottom: 0;
	background: rgba(255,255,255,0.1);
	filter: blur(10px);
}